<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <div>
        <input type="file" id="files" style="display: none" onchange="fileImport();">
        <input type="button" id="fileImport" value="导入">
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/json3/3.3.2/json3.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script type="text/javascript">
        //点击导入按钮,使files触发点击事件,然后完成读取文件的操作
        $("#fileImport").click(function () {
            $("#files").click();
        })
        var obj = [];
        function fileImport() {
            //获取读取我文件的File对象
            var selectedFile = document.getElementById('files').files[0];
            var name = selectedFile.name;//读取选中文件的文件名
            var size = selectedFile.size;//读取选中文件的大小
            console.log("文件名:" + name + "大小:" + size);

            var reader = new FileReader();//这是核心,读取操作就是由它完成.
            reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
            reader.onload = function () {
                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                // console.log(this.result);
                obj = JSON.parse(this.result);
                setInterval(function () {
                    addData();
                    myChart.setOption({
                        xAxis: {
                            data: vDate
                        },
                        series: [{
                            name: '成交',
                            data: vData
                        }]
                    });
                }, 100);
                // console.log(obj.data[0][0]);
                //     for (i in obj.data) {
                //         addData(obj.data[i][0], obj.data[i][1]);
                //         console.log(i);
                //     }
                //     myChart.setOption({
                //     xAxis: {
                //         data: vDate
                //     },
                //     series: [{
                //         // name:'成交',
                //         data: vData
                //     }]
                // });
            }
        }
        var vDate = [];
        var vData = [];
        function addData(mDate, mData) {
            vDate.push(mDate);
            vData.push(mData);
        }
        var i = 0;
        function addData() {
            // console.log(i);
            if (i < obj.data.length) {
                // addData(obj.data[i][0], obj.data[i][1]);
                vDate.push(obj.data[i][0]);
                console.log(obj.data[i][0]);
                vData.push(obj.data[i][1]);
                console.log(obj.data[i][1]);
                console.log(i);
                i++;
            }
        }
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            xAxis: {
                type: 'category',
                data: vDate
            },
            yAxis: {
                type: 'value',
                max:'dataMax',
                min:'dataMin',
            },
            series: [{
                data: vData,
                type: 'line',
                areaStyle: {}
                // smooth: true
            }]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

    </script>
</body>

</html>